<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<el-form ref="form" :model="task" label-width="150px">
						<el-form-item label="任务类型：">
							<el-radio-group v-model="task.parentId">
								<el-radio
								v-for="type in taskTypesParent"
								:key="type.value"
								:label="type.value">{{type.label}}
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<div class="taskInfo">
							<el-form-item label="任务名称：">
								<el-input v-model="task.name" placeholder="请输入任务名称"></el-input>
							</el-form-item>

							<el-form-item label="任务头像：">
								<el-upload
								class="upload-demo"
								v-bind:action="uploadTaskUrl"
								:on-remove="handleRemove"
								:on-success="handleSuccess"
								:on-error="handleError"
								:limit="1"
								:file-list="fileListTask"
								list-type="picture">
									<el-button size="small" type="primary">点击上传</el-button>
									<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
								</el-upload>
							</el-form-item>
						</div>

						<div class="taskInfo">
							<div v-if="task.parentId==1">
								<el-form-item label="设置订单解析模板：">
									<el-checkbox-group v-model="task.orderModel">
										<el-checkbox
										v-for="order in orderModels"
										:key="order.value"
										:label="order.value">{{order.label}}
										</el-checkbox>
									</el-checkbox-group>
								</el-form-item>
								<el-form-item label="设置兑换比例：">
									<el-col :span="5">
										<el-input
											placeholder="请输入金额"
											v-model="task.candy" id="changePercent">
											<template slot="prepend">100：</template>
										</el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="兑换规则：">
									<el-input type="textarea" v-model="task.describe" placeholder="请输入兑换规则"></el-input>
								</el-form-item>
							</div>

							<div v-if="task.parentId==2">
								<el-form-item label="设置金额：">
									<el-col :span="5">
										<el-input
											placeholder="请输入金额"
											v-model="task.candy">
											<template slot="append">每次</template>
										</el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="兑换规则：">
									<el-input type="textarea" v-model="task.describe" placeholder="请输入兑换规则"></el-input>
								</el-form-item>
							</div>

							<div v-if="task.parentId==3">
								<el-form-item label="设置金额：">
									<el-col :span="7">
										<el-input
											placeholder="请输入时长"
											v-model="task.times">
											<template slot="prepend">每</template>
											<template slot="append">分钟</template>
										</el-input>
									</el-col>
									<el-col :span="5">
										<el-input
											placeholder="请输入数量"
											v-model="task.coins">
											<template slot="append">糖果币</template>
										</el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="文章来源：">
									<el-checkbox-group v-model="task.articleSource">
										<el-checkbox
										v-for="source in articleSources"
										:key="source.value"
										:label="source.label"
										:value="source.value">
										</el-checkbox>
									</el-checkbox-group>
								</el-form-item>
							</div>


						</div>

						<el-form-item>
							<el-button type="primary" @click="addTask()">立即创建</el-button>
							<el-button @click="cancelTask()">取消</el-button>
						</el-form-item>
					</el-form>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'

  // 配置API接口地址
  import config from "../../config.json"
  const Root = config.API_HOST;
	export default{
		name:'TaskAdd',
		methods: {
		  //添加商品方法
			addTask(){
			  var that = this;
				this.$api.post('task/add',that.task,function(data){
          if(data.flag=="success"){
            that.$router.push('/task/list');
          } else{
            that.$message.error(data.msg);
          }
				});
			},
			cancelTask(){
				this.$router.push('/task/list');
			},
			handleSuccess(response, file, fileList){
        if(response.flag=="success"){
          this.task.behaviorImages.push(response.data.id);
        }
			},
			handleRemove(file,fileList){
        for(var i=0;i<this.task.behaviorImages.length;i++){
          if(this.task.behaviorImages[i]==file.response.data.id){
            this.task.behaviorImages.splice(i,1);
            break;
          }
        }
			},
			handleError(){
				this.$message.error('上传图片失败');
			}
		},
		data:function(){
			return {
			  //上传图片
        uploadTaskUrl:Root + "/task/image/upload",
        fileListTask:[],
				navs:["打卡任务管理","新建任务"],
				task:{
          parentId:"",
					type:"",
					name:"",
					taskDate:[],
					profile:"",
					orderModel:[],
          //糖果币
          candy:"",
          //活动描述
          describe:"",
					times:"",
					coins:"",
					articleSource:"",
          status:1,
          behaviorImages:[]
				},
				taskStatus:this.GLOBAL.taskStatus,
        taskTypesParent:this.GLOBAL.taskTypesParent,
				orderModels:this.GLOBAL.orderModels,
				articleSources:this.GLOBAL.articleSources
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	#changePercent{
		width: 110px !important;
	}
</style>
